<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>博客发布</title>
    <div th:replace="admin/_fragments-admin::basicrefrence"></div>

    <link rel="stylesheet" href="/lib/editormd/css/editormd.min.css"/>
    <script src="/lib/editormd/editormd.min.js"></script>
</head>


<!--网页主体-->
<body>

    <!--网页头-->
    <nav th:replace="admin/_fragments-admin::nav"></nav>
    <div th:replace="admin/_fragments-admin::Seconednav"></div>

    <div class="ui teal message" style="position: fixed;display: none;z-index:9999;;left: 50%;margin-left: -50px;">这是一个自动消失的提示框</div>


    <div class="m-tenDistance">
        <div class="ui container">
            <div class="ui left labeled input">
                <div class="ui selection dropdown compact label">
                    <input type="hidden" id="tag"/>
                    <i class="dropdown icon"></i>
                    <div class="default text">标签</div>
                    <div class="menu">
                        <div class="item" data-value="1">原创</div>
                        <div class="item" data-value="2">搬运</div>
                    </div>
                </div>
                <div class="ui input">
                    <input id="title" type="text" placeholder="标题">
                </div>
            </div>
            <div class="ui selection dropdown label">
                <input type="hidden" id="type"/>
                <i class="dropdown icon"></i>
                <div class="default text">类型</div>
                <div class="menu" id="typeMenu"></div>
            </div>
            <div class="ui input">
                <input type="text" id="picture" placeholder="图片">
            </div>


            <div class="field">
                <div id="md-content" style="z-index: 1">
                    <textarea id="content" style="display: none"></textarea>
                </div>
            </div>

            <div class="ui right aligned container">
                <button id="publishBtn" class="ui teal button">发布</button>
            </div>

        </div>
    </div>



    <footer th:replace="admin/_fragments-admin::footer"></footer>


</body>

<script type="text/javascript">
    //初始化markdown编辑器
    var contentEditor;
    contentEditor = editormd("md-content",{
        width:"100%",
        height:640,
        syncScrolling:"single",
        path:"/lib/editormd/lib/",

    });

    $.ajax({
        url:"/listAllType",
        success:function (resp) {
            if (resp.code === 0) {
                return;
            }
            for(let type of resp.data){
                $('#typeMenu')
                    .append("<div class=\"item\" data-value=\""+type.id+"\">"+type.name+"</div>");
                $('.ui.dropdown').dropdown();
            }
        }
    });

    function messageDisplay(content) {
        // 显示并自动隐藏 Message 组件
        $('.ui.message')
            .text(content)
            .fadeIn('slow')
            .delay(5000)  // 设置显示时间，单位是毫秒
            .fadeOut('slow', function() {
                // 隐藏后移除 Message 组件
                $(this).css("display","none");
            });
    }

    $('#publishBtn').on('click',function (){
        let tag = $('#tag').val();
        let title = $('#title').val();
        let type = $('#type').val();
        let picture = $('#picture').val();
        let content = contentEditor.getMarkdown();
        if (tag == null || tag === "") {
            messageDisplay("请填写标签");
            return;
        }
        if (title == null || title === "") {
            messageDisplay("请填写标题");
            return;
        }
        if (type == null || type === "") {
            messageDisplay("请填写类型");
            return;
        }
        if (picture == null || picture === "") {
            messageDisplay("请填写图片");
            return;
        }
        if (content == null || content === "") {
            messageDisplay("请填写内容");
            return;
        }
        $.ajax({
            url:'/admin/pushBlog',
            type:'post',
            data:{
                tag:tag,
                title:title,
                type:type,
                picture:picture,
                content:content
            },
            success:function (data){
                if(data.code === 1){
                    $('#title').val("");
                    $('#picture').val("");
                    contentEditor.setMarkdown("");
                    messageDisplay("发布成功");
                }else{
                    messageDisplay("发布失败:" + data.msg);
                }
            }
        })
    })


</script>

</html>